<template>
  <div class="top">
    <van-nav-bar title="商品详情" left-arrow @click-left="onClickLeft" />
  </div>
  <div class="goods">
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item v-for="item in album" :key="item.id">
        <img :src="item.picture" height="400" />
      </van-swipe-item>
    </van-swipe>
    <van-cell-group>
      <van-cell>
        <template #title>
          <span class="goods-top">新品</span>
          <div class="goods-price">
            <span class="small">￥</span>
            {{ goods.price }}
            <span class="spec">{{ goods.spec }}</span>
          </div>
          <div class="goods-title">
            <span class="small2"> {{ goods.name }}</span>
          </div>
        </template>
      </van-cell>
      <van-cell class="goods-express">
        <template #title>
          <van-col span="10">运费：10</van-col>
          <van-col span="14">剩余：{{ goods.stock }}</van-col>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="goods-cell-group">
      <van-cell>
        <template #title>
          <span class="van-cell-text">发货 陕西宝鸡</span>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <span class="van-cell-text">保障 坏单包赔·假一赔四·极速退款</span>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <span class="van-cell-text">参数 品牌：枝纯 价格：100-200</span>
        </template>
      </van-cell>
    </van-cell-group>
    <div class="goods-cell-title">—— 宝贝详情 ——</div>
    <div class="goods-description" v-html="goods.description"></div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" @click="sorry" text="客服" />
      <van-action-bar-icon icon="cart-o" @click="onClickCart" text="购物车" :badge="CartCount()" />
      <van-action-bar-button type="warning" @click="addCart" text="加入购物车" />
      <van-action-bar-button type="danger" @click="sorry" text="立即购买" />
    </van-action-bar>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { getalbum, getgoods } from "../api";
import { useRouter } from "vue-router";
import useCart from '../store/cart'
import { showToast } from "vant";

const { CartCount, addToCart } = useCart()

const goods = reactive({});
const album = ref([]);
const router = useRouter();

const onClickLeft = () => {
  router.back();
};

const props = defineProps({
  id: String,
});
onMounted(() => {
  loadGoodsDetail();
});
const loadGoodsDetail = async () => {
  const data1 = await getgoods({ id: props.id });
  if (!data1.id) {
    isNotFound.value = true;
    return;
  }
  const data2 = await getalbum({ goods_id: props.id });
  if (data2.length === 0 && data1.picture !== "") {
    data2.push({ picture: data1.picture });
  }
  Object.assign(goods, data1);
  album.value = data2;
};
const onClickCart = () => {
  router.push({ name: 'cart' })
};

const addCart = () => {
  addToCart({ id: props.id, num: 1, checked: true })
  showToast({
    message: '添加成功'
  })
};

const sorry = () => {
  showToast({
    message: '无'
  })
};
</script>
<style scoped>
.top {
  --van-nav-bar-background: #ee7a06;
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  height: 100%;
  overflow-y: scroll;
}

.top .van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}


.goods {
  text-align: center;
  padding-bottom: 50px;
}

.goods-swipe img {
  width: 100%;
  display: block;
}

 .goods-top {
  display: block;
  width: 30px;
  padding: 0 5px;
  border-radius: 10px;
  color: #fff;
  background-color: #f44;
}

.goods-title {
  text-align: left;
}

.goods-title .small {
  font-size: 14px;
}

.goods .goods-price {
  color: #f44;
  text-align: left;
  font-size: 20px;
}

.goods .goods-price .small2 {
  font-size: 12px;
}

.goods .goods-price .spec {
  font-size: 12px;
  color: #999;
}

.goods .goods-cell-title {
  padding: 20px 0;
}

.goods .goods-description {
  overflow: hidden;
  width: 95%;
  margin: 0 auto;
  padding-bottom: 20px;
  font-size: 14px;
}

.goods .goods-description :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

.goods .goods-express {
  color: #999;
  font-size: 12px;
  padding: 5px 15px;
}

.goods .goods-express .van-col {
  float: left;
}

.goods .goods-express .van-col--14 {
  width: 58%;
}

.goods .goods-cell-group .van-cell__title span {
  float: left;
}

.goods .van-cell:after {
  border: none;
}

.goods-not-found {
  padding-top: 48px;
  text-align: center;
  font-size: 28px;
}

.van-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
</style>